<template>
	<view class="">
		<myp-navbar :title="title"></myp-navbar>
		<myp-tabbar :duration="0" ref="tabbar" top="status-nav" :tabs="tabs" :tabStyle="tabStyle" @tabClicked="tabbarSwitched">
			<div style="width: 750rpx; ">
				<myp-list :down="null" :up="null" bgType="inverse" extra="status-nav-x-60px">
					<myp-list-cell v-for="(item, index) in 70" :key="index">
						<view style="background-color: #A0CFFF; margin-bottom: 20rpx;">
							{{ index }}
							<!-- <qiun-data-charts type="line" :chartData="chartsDataColumn1" /> -->
						</view>
					</myp-list-cell>
				</myp-list>
			</div>
			<div style="width: 750rpx; background-color: #FEF0F0;">2</div>
			<div style="width: 750rpx; background-color: #71D5A1;">3</div>
			<div style="width: 750rpx; background-color: #DD6161;">4</div>
			<div style="width: 750rpx; background-color: #FFD666;">5</div>
		</myp-tabbar>
	</view>
</template>

<script>
export default {
	onLoad() {
		// console.log(this.$u)
		// this.$u.api.test2()
	},
	data() {
		return {
			chartsDataColumn1: {
				categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
				series: [
					{
						name: '目标值',
						data: [35, 36, 31, 33, 13, 34]
					},
					{
						name: '完成量',
						data: [18, 27, 21, 24, 6, 28]
					}
				]
			},
			title: '首页',
			tabs: [
				{
					icon: '/static/icons/tab_0.png',
					selectedIcon: '/static/icons/tab_0_active.png',
					title: '首页',
					selectedTitle: '首页'
					// badge: '12'
				},
				{
					icon: '/static/icons/tab_1.png',
					selectedIcon: '/static/icons/tab_1_active.png',
					title: '监测',
					selectedTitle: '监测'
				},
				{
					icon: '/static/icons/tab_2.png',
					selectedIcon: '/static/icons/tab_2_active.png',
					title: '能效',
					selectedTitle: '能效'
				},
				{
					icon: '/static/icons/tab_3.png',
					selectedIcon: '/static/icons/tab_3_active.png',
					title: '运维',
					selectedTitle: '运维'
				},
				{
					icon: '/static/icons/tab_4.png',
					selectedIcon: '/static/icons/tab_4_active.png',
					title: '档案',
					selectedTitle: '档案'
				}
			],
			tabStyle: {
				iconStyle: 'width:28px;height:28px;',
				selectedIconStyle: 'width:28px;height:28px;',
				titleStyle: 'font-size:12px;color:#888888;',
				selectedTitleStyle: 'font-size:12px;color:#108EE9;',
				boxStyle: 'border-top-width:1px;border-top-color:#DDDDDD;border-top-style:solid;',
				height: 60
			}
		};
	},
	methods: {
		tabbarSwitched(val) {
			const page = val.page;
			this.title = this.tabs[val.page].title;
		}
	}
};
</script>

<style></style>
